<template>
  <div class="numberbox">
  	<button type="button" id="reduce" @click="reduce()">-</button>
  	<input type="number" id="text" v-model="products.number">
  	<button type="button" id="add" @click="add()">+</button>
  </div>
</template>

<script>
  export default {
  name: 'NumberBox',
  props: {
   
  },
  data() {
    return {
      products:{
      	number:0,
      },
    }
  },
  methods: {
	add(){
		this.products.number++;
	},
	reduce(){
		if(this.products.number>=1){
		this.products.number--;
		}
	},
  },
}
</script>
<style scoped="scoped">
	/*numberbox*/
	.numberbox{width:7.2rem; height:2rem; overflow:hidden; display:flex; align-items: center; justify-content:center; border:1px #dddddd solid; border-radius: 0.3rem;}
	.numberbox button{width:2.3rem; height:2rem;  background: #f6f6f6; color: #666; text-align: center; font-size:1.2rem;}
	.numberbox input{width:2.8rem; height:2rem; line-height:2rem; background: #fff; font-size:0.9rem; border: 0; border-left: 1px #eeeeee solid; border-right: 1px #eeeeee solid; text-align: center; color: #333;} 
</style>